<template>
  <div class="item"
       v-for="(item,index) in menu"
       :key="index"
       :class="setClass(item.path)"
       @click="toPage(item.path,index)">
    <div class="icon">
      <img :src="index === indexMenu ? item.select:item.icon" alt=""/>
    </div>
    <div class="name">{{ item.name }}</div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import router from '@/router'

import index from '@/assets/icon/index.svg'
import indexSelect from '@/assets/icon/indexSelect.svg'
import hotspot from '@/assets/icon/hotspot.svg'
import hotspotSelect from '@/assets/icon/hotspotSelect.svg'
import push from '@/assets/icon/push.svg'
import vip from '@/assets/icon/vip.svg'
import vipSelect from '@/assets/icon/vipSelect.svg'
import my from '@/assets/icon/my.svg'
import mySelect from '@/assets/icon/mySelect.svg'

const menu: any = ref<Array<any>>([
  {
    name: '首页',
    icon: index,
    select: indexSelect,
    path: '/'
  },
  {
    name: '热点',
    icon: hotspot,
    select: hotspotSelect,
    path: 'hotspot'
  },
  {
    name: '发布',
    icon: push,
    select: push,
    path: 'push'
  },
  {
    name: '会员',
    icon: vip,
    select: vipSelect,
    path: 'vip'
  },
  {
    name: '我的',
    icon: my,
    select: mySelect,
    path: 'my'
  }
])
const indexMenu: any = ref<Number>(0)
const setClass = (name: String) => {
  if (name === 'push') return `push`
}
const toPage = async (path: string, index: Number) => {
  indexMenu.value = index
  await router.push({path: path})
}
</script>

<style scoped lang="scss">
.item {
  width: 50px;
  height: 50px;
  //border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  font-size: 12px;
  object-position: center;
  object-fit: cover;
  cursor: pointer;

  img {
    width: 25px;
    height: 25px;
  }
}

.push {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid red;

  img {
    width: 30px;
    height: 30px;
  }
}
</style>
